<script setup lang="ts" name="PersonComponent">
import { reactive, ref } from 'vue';
let car = reactive({ brand: '奔驰', price: 100 });
let car1 = ref({ brand: '奔驰', price: 100 }); // 用ref定义可以整个替换
let sum = ref(0);

const changeSum = () => {
  sum.value += 1;
};

const changePrice = () => {
  car.price += 10;
  console.log(car);
};

const changeCar = () => {
  // car = reactive({ brand: '宝马', price: 200 }); //你以为加个reactive可以改变，其实这样不行,页面不更新
  Object.assign(car, { brand: '宝马', price: 200 });
  car1.value = { brand: '宝马1', price: 2300 };
};
</script>
<template>
  <div class="person">
    <p>一辆{{ car.brand }}价值{{ car.price }}元</p>
    <p>一辆{{ car1.brand }}价值{{ car1.price }}元</p>
    <button @click="changePrice">修改汽车的价格</button>
    <button @click="changeCar">修改汽车</button>
    {{ sum }}
    <button @click="changeSum">求和</button>
  </div>
</template>

<style scoped>
.person {
  color: red;
}
ul li {
  font-size: 20px;
}
</style>
